<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script type="module">
    // import {
    //     createRenderer,
    //     render,
    //     Fragment,
    //     h,
    //     ref
    // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js'
    // import {
    //     createRenderer,
    //     render,
    //     h
    // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.prod.js'
    import {
        // renderOptions,
        h,
        render,
        Fragment,
        Text,
        ref
    } from "./runtime-dom.js"

    // setup函数，那个组件都会执行一次，可以放入我们的composition api reactive ref...
    // 解决反复横跳
    // setup函数render
    const vueComponent = {
        //  setup函数，优先级高于render函数
        // 可以返回一个对象，也可以返回一个函数（对象是组件的代理对象，函数是组件的render函数）

        setup() {

            const age = ref(1)
            setTimeout(() => {
                age.value = 2
            }, 1000)
            // return {
            //     name: 'zs',
            //     // age: age.value //这么写就不变化了因为ref是响应式的，但是age.value不是响应式的
            //     age
            // }
            return () => h('div', age.value)
        },
        // 会自动.value
        render(proxy) {
            return h('div', proxy.age)
        }
    }
    render(h(vueComponent, {}), document.body)
</script>

</html>